{{ define "js" }}
  <script>
    viewHexDataAs("extra-data", "utf-8")
    activateTabbarSwitcher("tabContent", "tab", "overview")
  </script>
{{ end }}

{{ define "css" }}
{{ end }}

{{ define "content" }}
  {{ with .Data }}
    <div class="container mt-2">
      <div class="my-3">
        <div class="d-md-flex py-2 justify-content-md-between">
          <h1 class="h4 mb-1 mb-md-0">
            {{ if gt .Number 0 }}
              <a href="/block/{{ .PreviousBlock }}"><i class="fa fa-chevron-left"></i></a>
            {{ end }}
            <span class="ml-1 mr-1"><i class="fas fa-cube mr-2"></i>Block {{ .Number }}</span>
            {{ if gt .NextBlock 0 }}
              <a href="/block/{{ .NextBlock }}"><i class="fa fa-chevron-right"></i></a>
            {{ end }}
          </h1>
          <nav class="d-flex flex-wrap-reverse flex-md-nowrap justify-content-center align-items-center" aria-label="breadcrumb">
            <ol style="white-space: nowrap;padding:0; background-color:transparent;" class="breadcrumb font-size-1 flex-nowrap mb-0" style="padding:0; background-color:transparent;">
              <li class="breadcrumb-item"><a href="/" title="Home">Home</a></li>
              <li class="breadcrumb-item"><a href="/blocks" title="Blocks">Blocks</a></li>
              <li class="breadcrumb-item active" aria-current="page">Block details</li>
            </ol>
          </nav>
        </div>
      </div>
      <div id="r-banner" info="{{ $.Meta.Templates }}"></div>
      <ul style="margin-bottom: -1px;" class="nav nav-tabs justify-content-start" id="tab" role="tablist">
        <li class="nav-item">
          <a class="nav-link active" id="overview-tab" data-toggle="pill" href="#overview" role="tab" aria-controls="overview" aria-selected="true">Overview</a>
        </li>
        {{ if gt (len .Txs) 0 }}
          <li class="nav-item">
            <a class="nav-link" id="transactions-tab" data-toggle="pill" href="#transactions" role="tab" aria-controls="transactions" aria-selected="false">Transactions <span class="badge bg-secondary text-white">{{ .TxCount }}</span></a>
          </li>
        {{ end }}
        {{ if gt (len .Uncles) 0 }}
          <li class="nav-item">
            <a class="nav-link" id="uncles-tab" data-toggle="pill" href="#uncles" role="tab" aria-controls="uncles" aria-selected="false">Uncles <span class="badge bg-secondary text-white">{{ .UncleCount }}</span></a>
          </li>
        {{ end }}
      </ul>
      <style>
        .block-card {
          border-top-left-radius: 0;
          border-top-right-radius: 0;
        }
      </style>
      <div class="card block-card">
        <div style="margin-bottom: -.25rem;" class="card-body px-0 py-1">
          <div class="tab-content" id="tabContent">
            <div class="tab-pane fade" id="overviewTabPanel" role="tabpanel" aria-labelledby="overview-tab">
              <div class="row border-bottom p-3 mx-0">
                <div class="col-md-2">Miner:</div>
                <div class="col-md-10">{{ .MinerFormatted }}</div>
              </div>
              <div class="row border-bottom p-3 mx-0">
                <div class="col-md-2">Reward:</div>
                <div class="col-md-10">
                  {{ formatAmount .Reward config.Frontend.ElCurrency 5 }}
                  {{ if gt (bigIntCmp .MevReward 0) 0 }}
                    +
                    {{ formatAmount .MevReward config.Frontend.ElCurrency 5 }}
                  {{ end }}
                </div>
              </div>
              <div class="row border-bottom p-3 mx-0">
                <div class="col-md-2">Tx Fees:</div>
                <div class="col-md-10">{{ formatAmount .TxFees config.Frontend.ElCurrency 5 }}</div>
              </div>
              <div class="row border-bottom p-3 mx-0">
                <div class="col-md-2">Gas Usage:</div>
                <div class="col-md-10">{{ .GasUsage }}</div>
              </div>
              <div class="row border-bottom p-3 mx-0">
                <div class="col-md-2">Gas Limit:</div>
                <div class="col-md-10">{{ formatAddCommas .GasLimit }}</div>
              </div>
              {{ if gt .TxCount 0 }}
                <div class="row border-bottom p-3 mx-0">
                  <div class="col-md-2">Lowest gas price:</div>
                  <div class="col-md-10">{{ formatAmount .LowestGasPrice "GWei" 0 }}</div>
                </div>
              {{ end }}
              <div class="row border-bottom p-3 mx-0">
                <div class="col-md-2">Time:</div>
                <div class="col-md-10 d-flex justify-between flex-wrap">
                  {{ template "timestamp" .Ts }}
                </div>
              </div>
              <div class="row border-bottom p-3 mx-0">
                <div class="col-md-2">Difficulty:</div>
                <div class="col-md-10">{{ formatDifficulty .Difficulty }}</div>
              </div>
              <div class="row border-bottom p-3 mx-0">
                <div class="col-md-2">Base fee:</div>
                <div class="col-md-10">{{ formatAmount .BaseFeePerGas "GWei" 5 }}</div>
              </div>
              <div class="row border-bottom p-3 mx-0">
                <div class="col-md-2">Burned fees:</div>
                <div class="col-md-10">{{ formatAmount .BurnedFees config.Frontend.ElCurrency 5 }}</div>
              </div>
              <div class="row border-bottom p-3 mx-0">
                <div class="col-md-2">Extra:</div>
                <div class="col-md-8 text-monospace text-break" id="extra-data" aria-hex-data="{{ .Extra }}">{{ .Extra }}</div>
                <div class="col-md-2 text-right">
                  <div class="btn-group btn-group-toggle" data-toggle="buttons">
                    <label class="btn btn-light text-dark active btn-sm" onclick="viewHexDataAs('extra-data', 'hex')"> <input type="radio" name="options" id="optionHex" /> Hex </label>
                    <label class="btn btn-light text-dark btn-sm" onclick="viewHexDataAs('extra-data', 'utf-8')"> <input type="radio" name="options" id="optionUTF8" checked /> UTF-8 </label>
                  </div>
                </div>
              </div>
              <div class="row border-bottom p-3 mx-0">
                <div class="col-md-2">Hash:</div>
                <div class="col-md-10 text-monospace"><a href="/block/{{ .Hash }}">{{ .Hash }}</a></div>
              </div>
              <div class="row border-bottom p-3 mx-0">
                <div class="col-md-2">Parent Hash:</div>
                <div class="col-md-10 text-monospace"><a href="/block/{{ .ParentHash }}">{{ .ParentHash }}</a></div>
              </div>
            </div>
            <div class="tab-pane fade" id="transactionsTabPanel" role="tabpanel" aria-labelledby="transactions-tab">
              {{ template "execution_transactions" . }}
            </div>
            <div class="tab-pane fade" id="unclesTabPanel" role="tabpanel" aria-labelledby="uncles-tab">
              <div class="row border-bottom p-1 mx-0">
                <div class="col-md-12 text-center"><b>Showing {{ .UncleCount }} Uncle{{ if gt .UncleCount 1 }}s{{ end }} </b></div>
              </div>
              <div class="table-responsive">
                <table class="table table-sm table-bordered text-center">
                  <tr>
                    <th>Number</th>
                    <th>Level</th>
                    <th>Miner</th>
                    <th>Reward</th>
                    <th>Extra</th>
                  </tr>
                  {{ range .Uncles }}
                    <tr>
                      <td>{{ .Number }}</td>
                      <td>{{ subUI64 $.Data.Number .Number }}</td>
                      <td>{{ .MinerFormatted }}</td>
                      <td>{{ formatAmount .Reward config.Frontend.ElCurrency 5 }}</td>
                      <td>{{ .Extra }}</td>
                    </tr>
                  {{ end }}
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  {{ end }}
{{ end }}
